<template>
  <div class="clearfix img-sroll">
    <carousel
      class="index-carousel no-bottom"
      :autoplay="true"
      :minSwipeDistance="40"
      :scrollPerPage="true"
      :autoplayTimeout="5000"
      :speed="800"
      :perPage="1"
      paginationActiveColor="#0eb4b6"
      :paginationSize="15"
      :paginationPadding="10"
      paginationPosition="bottom-overlay"
      :navigationEnabled="true"
      navigationPrevLabel="<i class='iconfont left icon-zuo'></i>"
      navigationNextLabel="<i class='iconfont right icon-you'></i>"
      :loop="true">
      <slide class="good" v-for="(item, index) in list[0].sunList" :key="index">
        <div
          class="img-sroll"
          :style="{ background: 'url(' + item.titleImg + ')' }"
        ></div>
      </slide>
    </carousel>
  </div>
</template>

<script>
import { Carousel, Slide } from "vue-carousel";
import _http from "../httpService";
export default {
  name: "Banner",
  props: {},
  data() {
    return {
      list: [
        { imgUrl: require("../assets/images/banner.jpg") },
        { imgUrl: require("../assets/images/banner.jpg") },
        { imgUrl: require("../assets/images/banner.jpg") },
      ],
    };
  },
  components: {
    Carousel,
    Slide,
  },
  mounted() {},
  methods: {},
  created() {
    // 初始化加载栏目等数据
    _http
      .get("/website/jcChannel/getChannelListByPc?parentCode=banner")
      .then((response) => {
        console.log(response);
        this.list = [];
        response.data.result.records.forEach((element) => {
          this.list.push({
            name: element.channelName,
            path: element.link,
            sunList: element.contentList,
          });
        });
      })
      .catch((error) => console.log(error))
      .finally(() => (this.loading = false));
  },
};
</script>

<style lang="scss">
.img-sroll {
  display: block;
  height: 760px;
  background-size: 1920px 100% !important;
  background-position: center center !important;
}
.no-bottom {
  .VueCarousel-pagination--bottom-overlay {
    bottom: 80px !important;
  }
  .VueCarousel-navigation-button {
    transform: none !important;
    margin: -60px 30px 0px 30px;
    .iconfont {
      font-size: 30px;
      color: #fff;
    }
  }
  .VueCarousel-dot {
    width: 80px !important;
    height: 7px !important;
    border-radius: 10px !important;
  }
  .VueCarousel-navigation-button:focus,
  .VueCarousel-dot:focus {
    outline: 0px !important;
  }
}
</style>
